<template>
	<view :class="themeName">
		<!-- 提示 -->
		<u-notice-bar :list="noticeList"></u-notice-bar>

		<!-- 申请售后头部商品 -->
		<view>
			<view class="m-t-20 bg-white flex p-24 p-l-30" v-for="(item,index) in goodsList">
				<u-image style="width: 160rpx; height: 160rpx;" :src="item.image" width="160rpx" height="160rpx"
					mode="aspectFill"></u-image>
				<view class="m-l-12" style="width: 400rpx;">
					<view class="nr line-2 m-b-10">
						{{ item.name }}
					</view>
					<view class="xs muted skuline">
						{{ item.sell_price }}
					</view>
				</view>
				<view @click="update(item)"
					style="width: 100rpx;margin-left: 20rpx; text-align: center; border: 1px solid; border-radius: 20rpx; padding: 5rpx;">
					更换</view>
			</view>
		</view>
		<!-- 规格选择Popup -->
		<goods-spec v-model="showGoodsSpec" :isNumber="false" :isNoMarking="true" :defaultInfo="{
                image: goodsInfo.image,
                price: goodsInfo.sell_price,
                stock: goodsInfo.total_stock,
                unit: goodsInfo.unit_name,
                limit_type: goodsInfo.limit_type,
                limit_value: goodsInfo.limit_value,
                buy_num: goodsInfo.buy_num,
                cart_goods_num: goodsInfo.cart_goods_num
            }" @closer="showGoodsSpec = false" :stock_show="goodsInfo.stock_show" :reCheck="reCheck" :cartId="cartId"
			:buttons="specButtonsList" :spec-list="goodsInfo.spec_value" :spec-map="goodsInfo.spec_value_list"
			@buy="handleBuy" @change="changeGoodsSpec" :skuIDlist="skuIDlist" />
		<!-- E 规格 -->
	</view>
</template>

<script>
	import {
		apiGoodsLists,
		apiGoodsDetail
	} from "@/api/goods.js";
	import {
		apiModifyGoodsItem
	} from "@/api/order.js";
	import {
		debounce
	} from "@/utils/tools";
	export default {
		data() {
			return {
				noticeList: [
					"更换商品订单仅可更换一次,请谨慎操作!",
				],
				id: 1,
				goods_lable_id: 0,
				current: 0, //选择原因的索引
				fileList: [], //上传凭证
				goodsList: [],
				goodsInfo: {},
				showGoodsSpec: false,
				reCheck: 0, //标识购物车内重选
				cartId: 0,
				skuIDlist: [],
				specButtonsGroups: {
					buy: {
						event: 'buy',
						text: '立即更换'
					},
				},
				specButtonsList: [],
				isLoading: false,
			};
		},

		onLoad() {
			const options = this.$Route.query;
			this.id = options.id;
			this.goods_lable_id = options.goods_lable_id;
			this.getAfterSaleGoods();
		},

		methods: {
			// 获取商品自订单商品
			getAfterSaleGoods(methods = "") {
				apiGoodsLists({
					goods_lable_id: this.goods_lable_id,
				}).then((res) => {
					this.goodsList = res.lists;
				});
			},
			update(goods) {
				return new Promise((resolve, reject) => {
					apiGoodsDetail({
							id: goods.id,
						})
						.then((data) => {
							this.goodsInfo = data
							this.showGoodsSpec = true
							this.specButtonsList = [this.specButtonsGroups.buy]
							return data
						})
						.then((data) => {
							// #ifdef H5
							// 设置分享
							this.$store.dispatch('setWxShare', {
								shareImage: data?.image,
								shareDesc: data?.name
							})
							// #endif
							resolve(data)
						})
						.catch((err) => {
							reject(err)
						})
				})
			},
			changeGoodsSpec() {

			},
			handleBuy({
				spec,
				number
			}) {
				apiModifyGoodsItem({
					order_id: this.id,
					goods_id: spec.goods_id,
					item_id: spec.id
				}).then(res => {
					uni.navigateBack()
				})
			},
		},
		async onShow() {

		},
	};
</script>

<style lang="scss">
	.bb {
		border-bottom: 1rpx solid #f2f2f2;
	}

	textarea {
		flex: 1;
		height: 172rpx;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.pop-header {
		line-height: 42rpx;
		padding: 30rpx;
	}

	.reason-item {
		padding: 20rpx;

		.reason-desc {
			line-height: 46rpx;
		}
	}

	.post-btn {
		height: 84rpx;
		margin: 40rpx 24rpx 0 24rpx;
		@include background_color();
		background-color: #FF584D;
	}
</style>